<template>
	<view>
		<view class="p-4 border-bottom border-light flex justify-between align-center">
			<text class="font-md font-weight-bold">头像</text>
			<button style="width: 120rpx;border-radius: 50%;overflow: hidden;height: 120rpx;" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image :src="Image"  style="width: 100%;" mode="widthFix"></image>
			</button>
		</view>
		<view @click="handleName()" class="p-4 border-bottom border-light flex justify-between align-center">
			<text class="font-md font-weight-bold">昵称</text>
			<text v-if="!isNick" class="font">{{Nick}} &gt;</text>
			<input @blur="blurName" v-else class="font" @input="bindinput" type="nickname" v-model="Nick">
		</view>
		<view @click="handleRealyName()" class="p-4 border-bottom border-light flex justify-between align-center">
			<text class="font-md font-weight-bold">姓名</text>
			<text v-if="!isMember_Name" class="font">{{Member_Name}} &gt;</text>
			<input @blur="blurRealyName()" v-if="isMember_Name" class="font" v-model="Member_Name">
		</view>
		<!-- <view class="p-4 border-bottom border-light flex justify-between align-center">
			<text class="font-md font-weight-bold">生日</text>
			<text class="font">2023-08-31 &gt;</text>
		</view> -->
		<view @click="handlePhone()" class="p-4 border-bottom border-light flex justify-between align-center"
			style="border-bottom: 10px solid #f8f9fa;">
			<text class="font-md font-weight-bold">绑定手机号</text>
			<text v-if="!isMobile" class="font">{{Mobile}} &gt;</text>
			<input maxlength="11" placeholder="请输入手机号" @blur="blurPhone()" v-if="isMobile" class="font" type="text" v-model="Mobile">
		</view>
		<view @click="onAddress()" class="p-4 border-bottom border-light flex justify-between align-center">
			<text class="font-md font-weight-bold">地址管理</text>
			<text>&gt;</text>
		</view>
		<view @click="onPolicy()" class="p-4 flex justify-between align-center">
			<text class="font-md font-weight-bold">隐私协议</text>
			<text>&gt;</text>
		</view>
		<view class="px-4 fixed-bottom flex align-center justify-center" style="height: 300rpx;">
			<view class="bg-info rounded text-center py-2 text-white font-md font-weight-bold" style="width: 400rpx;"
				@click="submit()" hover-class="bg-hover-info" :hover-stay-time="150">更新个人信息</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				//头像模拟数据
				Image: '',
				Nick: '',
				isNick: false,
				Mobile: '',
				isMobile: false,
				Member_Name:'',
				isMember_Name:false
			}
		},
		methods: {
			handleName() { //点击昵称
				this.isNick = true
			},
			handleRealyName(){
				this.isMember_Name = true
			},
			blurRealyName(){
				this.isMember_Name = false
			},
			blurName(e) { //昵称失焦
				this.isNick = false
				this.Nick = e.detail.value;
			},
			handlePhone() {
				this.isMobile = true
			},
			bindinput(e) {
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				this.Nick = e.detail.value;
			},
			blurPhone() {
				this.isMobile = false
				const reg = /^1[3-9]\d{9}$/
				if(!reg.test(this.Mobile)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					this.Mobile = ''
				}
			},
			onChooseavatar(e) {
				this.Image = e.detail.avatarUrl;
				let _this = this
				uni.getFileSystemManager().readFile({
					filePath: e.detail.avatarUrl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						_this.Image ='data:image/jpeg;base64,' + res.data
						let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
			},
			submit() { //更新个人信息
				uni.showLoading({
					title: '上传中...'
				});
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: app.globalData.Domain_Name + '/WXMemberInfoIDAction',
					method: "POST",
					data: {
						Open_ID:app.globalData.openid,
						App_ID:app.globalData.appid,
						Enterprise_Info_SerialNumber:app.globalData.enterprise
					},
					success: (res) => {
						res.data[0].Nick = this.Nick
						res.data[0].Image = this.Image
						res.data[0].Mobile = this.Mobile
						res.data[0].Member_Name = this.Member_Name
						uni.request({
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							url: app.globalData.Domain_Name + '/GoodsFileEdit',
							method: "POST",
							data: {
								Data: JSON.stringify({
									Modify: {
										member_info: [res.data[0]]
									}
								}),
								Open_ID:app.globalData.Open_ID
							},
							success: (re) => {
								uni.hideLoading();
								if (re.data.Status == "success") {
									console.log("用户模式");
									app.globalData.memberInfo.Image = this.Image
									app.globalData.memberInfo.Nick = this.Nick
									app.globalData.memberInfo.Mobile = this.Mobile
									app.globalData.memberInfo.Member_Name = this.Member_Name
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
										})
									}, 1000)
								}
							},
						})
					}
				})
			},
			onAddress() { //跳转地址列表
				uni.navigateTo({
					url: '/pages/my/address'
				})
			},
			onPolicy(){	//跳转到隐私政策
				uni.navigateTo({
					url:'/pages/my/privacyPolicy'
				})
			}
		},
		onShow() {
			this.Mobile = app.globalData.memberInfo.Mobile
			this.Nick = app.globalData.memberInfo.Nick
			this.Image = app.globalData.memberInfo.Image
			this.Member_Name = app.globalData.memberInfo.Member_Name
		}
	}
</script>

<style lang="scss">
	button {
	    margin: unset;
	    padding: unset;
	}
	button:after {
		border: unset;
	}
</style>